<template>
  <div>
    <el-card shadow="never">
      <div class="box">
        <!-- 左边选择框 -->
        <div class="chooseBox">
          <div class="data_title">预测数据选择</div>
          <div class="common_box">
            预测模型：
            <el-select v-model="value1" placeholder="请选择">
              <el-option
                v-for="item in PredictiveModeling"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="common_box">
            环境因素：
            <el-select v-model="value3" placeholder="请选择" @change="change">
              <el-option
                v-for="item in ElementOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="common_box">
            设备编号：
            <el-select v-model="value2" placeholder="请选择">
              <el-option v-for="item in Equipment" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="common_box">
            预测时间：
            <el-select v-model="value4" placeholder="请选择">
              <el-option
                v-for="item in EquipmentDay"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <el-button type="primary" class="common_btn" @click="getData()">预测</el-button>
          <el-button type="primary" class="common_btn" @click="reset()">重置</el-button>
        </div>

        <!-- 右边展示 -->
        <div id="main" class="resBox">
          <div class="data_title">预测结果展示</div>
        </div>
        <!-- <div class="tips" v-if="flag">预测所得结果为种植适宜条件，建议维持现状。</div> -->
      </div>
    </el-card>
    <div class="bottom">
      <p>具体数值参照表</p>
      <div class="detail">
        <div>
          空气湿度适宜范围:
          相对应湿度为65~80%
        </div>
        <div>
          光照强度适宜范围
          1.2万~2万Lux（勒克斯）
        </div>
        <div>
          二氧化碳适宜范围：
          320~1000mg/kg
        </div>
        <div>空气温度适宜范围:
          23～34℃</div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入echarts
import Vue from 'vue'
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
import request from '../../../utils/request'
export default {
  data() {
    return {
      PredictiveModeling: [
        { value: '线性回归', label: '线性回归' }
      ],
      ElementOptions: [
        { value: 'pm2.5', label: 'PM2.5' },
        { value: 'pm10', label: 'PM10' },
        { value: '二氧化碳', label: '二氧化碳' },
        { value: '空气湿度', label: '空气湿度' },
        { value: '空气温度', label: '空气温度' },
        { value: '光照强度', label: '光照强度' }
      ],
      Equipment: [{ value: '选项1', label: 'E52412209' }],
      EquipmentDay: [{ value: 'day', label: '近一周' }],
      startTime: '',
      endTime: '',
      envir: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      envirValue: '',
      flag: false,
      titleTime: '',
      ataAll: []
    }
  },
  methods: {
    CurentTime() {
      var now = new Date()
      var year = now.getFullYear() // 年
      var month = now.getMonth() + 1 // 月
      var day = now.getDate() // 日

      var hh = now.getHours() // 时
      var mm = now.getMinutes() // 分

      var clock = year + '-'

      if (month < 10) clock += '0'

      clock += month + '-'

      if (day < 10) clock += '0'

      clock += day + ' '

      if (hh < 10) clock += '0'

      clock += hh + ':'
      if (mm < 10) clock += '0'
      clock += mm
      return clock
    },
    getTimes() {
      this.titleTime = this.CurentTime()
    },
    judge() {
      console.log(this.value4)
      if (this.value1 != null && this.value2 != null && this.value3 != null) {
        flag = true
      }
      if (flag) {
        return 1
      } else {
        alert('请完善选择信息！！')
        return 0
      }
    },
    reset() {
      (this.value1 = ''), (this.value2 = ''), (this.value3 = '')
    },
    change(value) {
      // value3 = this.value
      if (judge()) {
        this.setData(value)
      }
    },
    async getData() {
      if (this.value1 != '' && this.value2 != '' && this.value4 != '' && this.value3 != '') {
        const params = {
          model: this.value1,
          parameter: this.value3
        }
        console.log(params, 'params')
        await request({
          method: 'get',
          url: '/environment/catalogue/environmentForecast',
          params: params
        }).then((response) => {
          console.log(response)
          if (response.statusCode == 20000) {
            this.ataAll = response.data.res
            console.log(this.ataAll, 'all')
            this.setEcharts('预测结果展示')
          } else {
            this.$message({
              message: '发生错误，修改失败',
              type: 'warning'
            })
          }
        })
      } else {
        this.$message.info('请完善数据选项')
      }
    },
    setEcharts(labelName) {
      this.flag = true
      const myChart = echarts.init(document.getElementById('main'))
      var option = {
        title: {
          text: labelName
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              show: true
            }
          }
        },
        legend: {
          // 图例组件，通过点击图例控制哪些系列不显示，即小图例
          data: labelName
        },
        xAxis: {
          data: ['8:00', '12:00', '16:00', '20:00', '24:00']
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            name: '预测结果展示',
            type: 'line',
            data: this.ataAll
          }
        ]
      }
      myChart.clear() // 如果图表有修改需求建议加上此方法先清后画
      myChart.setOption(option)
    },
    mounted() {
      this.getTimes()
    }
  }}
</script>

<style scoped>
.box {
    position: relative;
    display: flex;
    min-width: 990px;
}

.data_title {
    font-size: 1.5rem;
    width: 100%;
}

.common_box {
    margin-top: 3rem;
}

.common_box::before {
    color: red;
    content: '*';
    font-size: 1.25rem;
}

.common_btn {
    margin-top: 3rem;
    margin-left: 3rem;
}

.chooseBox {
    width: 30%;
}

.resBox {
    margin-left: 1%;
    min-width: 60vw;
}

.tips {
    position: absolute;
    right: 2rem;
    /* bottom: 36rem; */
    float: right;
    color: red;
    font-weight: bold;
}

.bottom {
    display: flex;
    font-weight: 900;
    font-size: 18px;
    background-color: rgb(93, 170, 238);
    justify-content: space-around;
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
    height: 90px;
    width: 1400;
  }
  .detail {
      display: flex;
      justify-content: space-around;
      width: 1400px;
      font-weight: 900;
      font-size: 18px;
    }
</style>
